<template>
	<view class="container">
		<u-navbar :isBack="true" title="钱包" title-color="#101010"></u-navbar>
		<view class="panel">
		  <view class="purse-panel">
					<view class="purse-item">
			  <view style="flex: 1;">
				<view style="margin-top: 16rpx;font-size: 24rpx;color:#F5F5F5;">我的余额(元)</view>
				<text style="font-size: 60rpx; margin: 16rpx 0rpx 16rpx 0;">{{balance}}</text>
			  </view>
			  <view class="purse-section">
				<view style="border: solid 1px #fff; padding: 16rpx 50rpx; background-color: #fff; color: #666;" 
				@click="toWithdraw">
					<text style="font-size: 28rpx;padding-right: 4rpx;">提现</text>
				</view>
			  </view>
					</view>
			<view class="purse-item">
			  <view style="height: 1rpx; width: 100%; background-color: #F5F5F5; margin-top: 20rpx;"></view>
			</view>
			<view class="purse-item" style="justify-content: space-between; padding-left: 50rpx; padding-right: 30rpx;">
				<view class="purse-section" style="margin-top: 26rpx;" v-if="vuex_platformType != 1">
					<view style="color: #ddd;">今日收益</view>
					<view style="font-size: 36rpx; margin-top: 16rpx;">{{purseSection1}}</view>
				</view>
				<view class="purse-section-split-line" v-if="vuex_platformType != 1"></view>
				<view class="purse-section" style="margin-top: 26rpx;">
					<view style="color: #ddd;">累计充值(元)</view>
					<view style="font-size: 36rpx; margin-top: 16rpx;">{{purseSection2}}</view>
				</view>
				<view class="purse-section-split-line"></view>
				<view class="purse-section" style="margin-top: 26rpx;" @click="toWithdrawList">
					<view style="color: #ddd;">已提现(元)</view>
					<view style="font-size: 36rpx; margin-top: 16rpx;">{{purseSection3}}</view>
				</view>
			</view>
				</view>
		</view>
		<view class="panel" style="margin-top: 20rpx; height: 90vh;">
		  <view style="display: flex; flex-direction: row; justify-content: space-between;">
			<text style="font-size: 30rpx; font-weight: bold;">交易明细</text>
			<view>
			  <picker style="height: 100%;" mode="date" :value="selectedDate" @change="onDateChange" fields="month">
				<view>{{ selectedDateText }} <u-icon name="arrow-down" size="32" style="margin-left: 10rpx;" color="#999"></u-icon></view>
			  </picker>
			</view>
		  </view>
		  <purse-trade-item ref="listTrades" :selectedDate="selectedDate"></purse-trade-item>
		</view>
	</view>
</template>

<script>
  // import { userApi } from '../../common/user';
	export default {
		data() {
			return {
				// 钱包信息
				walletInfo: {},

				selectedDate: "",
				selectedDateText: "",

				purseSection1: "0.00",
				purseSection2: "0.00",
				purseSection3: "0.00",
				balance: 0,

				// 不要手动修改这个数组
				tradeList: [],
			}
		},
		onLoad(){
			let today = new Date();
			this.selectedDate = this.formatDateTime(today, "yyyy-MM");
			this.selectedDateText = this.formatDateTime(today, "yyyy年MM月");
			console.log(this.vuex_platformType);
			this.getWalletInfo();
		},
		methods: {
			getWalletInfo() {
				let self = this;
				userApi.getWalletInfo().then(res => {
					console.log('获取数据：', res);
					self.purseSection1 = res.purseSection1;
					self.purseSection2 = res.purseSection2;
					self.purseSection3 = res.purseSection3;
					self.balance = res.balance;
				});
			},
			toWithdraw(){
				uni.navigateTo({
				  url: '/pages/users/Withdraw'
				});
			},
			toWithdrawList(){
				uni.navigateTo({
				  url: '/pages/users/WithdrawList'
				});
			},
      onDateChange(e) {
        uni.$emit("refreshTrade", e.detail.value);
        // console.log("选择日期", e.detail.value);
        this.selectedDate = e.detail.value;
        let d = new Date(e.detail.value);
        this.selectedDateText = this.formatDateTime(d, "yyyy年MM月");
        this.$refs.listTrades.refreshTrades();
      },
      formatDateTime(date, format) {
				const o = {
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
					'H+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分
					's+': date.getSeconds(), // 秒
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					S: date.getMilliseconds(), // 毫秒
					a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
					A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
				};
				if (/(y+)/.test(format)) {
					format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (let k in o) {
					if (new RegExp('(' + k + ')').test(format)) {
					format = format.replace(
						RegExp.$1,
						RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
					);
					}
				}
				return format;
			},
		}
	}
</script>

<style lang="scss" scoped>
  .container {
    height: 100vh;
    background-color: #f5f5f5;
  }
  .panel {
    background-color: #FFF;
    padding: 32rpx 32rpx;
    border-radius: 16rpx;
  }
  .purse-panel {
    background: linear-gradient(to right, #8CA2F5, #5263CE);
    border-radius: 24rpx;
    padding: 24rpx;
		height: 320rpx;
    // margin: 32rpx;
    color: #FFF;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
  }
  .purse-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }
  .purse-section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .purse-section-split-line {
    background-color: #C5C5C5;
    width: 1rpx;
    height: 42rpx;
  }

  .trade-list {
    display: flex;
    flex-direction: column;
  }

  .trade-icon {
    width: 100rpx;
    height: 100rpx;
    background-color: #eee;
    border-radius: 10rpx;
    padding: 20rpx 20rpx;
  }

  .trade-list-item {
    margin-top: 25rpx;
    border-top: 0.1rpx solid #EEE;
    display: flex;
    flex-direction: row;
    // background-color: #CCC;
    padding: 20rpx 0;
  }

  .trade-list-item-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    padding: 0 0rpx 0 20rpx;
  }

  .trade-list-item-spread {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }


</style>
